<template>
  <div>
    <h1>nextTick</h1>
    <p ref="tianqi">{{msg}}</p>
    <h1 v-if="msg1">{{msg1}}</h1>
    <h1 v-if="msg2">{{msg2}}</h1>
    <button @click="changeMsg">nextTick</button>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "今天天气很好！",
      msg1: "",
      msg2: ""
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    changeMsg() {
      console.log(this.$refs.tianqi.textContent);
      //   textContent也可以获取元素中的内容
      // innerHTML innerText获取元素中的内容
      this.msg = "希望俄乌赶紧结束";
      this.msg1 = this.$refs.tianqi.textContent;
      //   this.msg2 = this.$refs.tianqi.textContent;
      //在下次DOM更新循环结束之后延迟回调，在修改数据之后使用这个方法
      this.$nextTick(function() {
        this.msg2 = this.$refs.tianqi.textContent;
      });
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>